body {
    font-family: "Micresoft YaHei",Arial,Helvetica;
}

nav.navbar {
    background-color: lightskyblue;
    border: 0;
}

.navbar-header a.navbar-brand,
.navbar-default .navbar-nav > li > a {
    color: white;
}

.container {
    width: 980px;
}

.index-block {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 50px;
    width:900px;
    height:300px;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    display: flex;
    /*position: absolute;*/
    /*top:50%;*/
}

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000px;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateX(180deg);
}

.flip-container .flipper {
    transform-origin: 100% -50px; /* 高的一半 */
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: -200px;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
}

/* back, initially hidden pane */
.back {
    transform: rotateX(180deg);
}